<template>
    <div class="app-container">
        <el-form class="formBox searchForm" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="顾客编号" prop="visitNum">
                <el-input v-model="queryParams.visitNum" placeholder="请输入顾客编号" clearable style="width: 160px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="姓名" prop="patientName" label-width="40px">
                <el-input v-model="queryParams.patientName" placeholder="请输入顾客姓名" clearable style="width: 160px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="检测指标" prop="status">
                <el-select v-model="queryListParams.visitDetectionName" filterable  placeholder="请选择检测指标" clearable
                    style="width: 200px">
                    <el-option v-for="dict in detectionType" :key="dict.detectionId" :label="dict.detectionName"
                        :value="dict.detectionName" />
                </el-select>
            </el-form-item>
            <el-form-item label="检测日期">
                <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" :picker-options="pickerOptions"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleQuery"></el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-form class="formBox formBox1 searchForm" :model="patientItem" ref="baseInfoForm" size="small" :inline="true"
            v-show="showSearch" label-width="68px">

            <el-row>
              <el-form-item label="顾客编号" prop="visitNum">
                <el-input v-model="patientItem.visitNum" placeholder="顾客编号" clearable style="width: 160px" :disabled="true" />
              </el-form-item>
                <el-form-item label="姓名" prop="patientName">
                    <el-input v-model="patientItem.patientName" placeholder="顾客姓名" clearable style="width: 100px"
                        :disabled="true" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select :disabled="true" v-model="patientItem.sex" placeholder="性别" clearable style="width: 100px">
                        <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄" prop="birthDate">
                    <el-input v-model="patientItem.birthDate" placeholder="顾客年龄" clearable style="width: 100px"
                        :disabled="true" />
                </el-form-item>
                <el-form-item label="手机号" prop="patientPhone">
                    <el-input v-model="patientItem.patientPhone" placeholder="顾客手机号" clearable style="width: 160px"
                        :disabled="true" />
                </el-form-item>
            </el-row>
          <el-form-item label="顾客性质" prop="properties">
            <el-select v-model="patientItem.properties" placeholder="顾客性质" clearable style="width: 160px"
                       :disabled="true">
              <el-option v-for="dict in dict.type.sys_patient_properties" :key="dict.value" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="顾客分类" prop="customerSort">
            <el-select v-model="patientItem.customerSort" placeholder="顾客分类" clearable style="width: 100px"
                       :disabled="true">
              <el-option v-for="dict in dict.type.sys_patient_sort" :key="dict.value" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="patientItem.status" placeholder="诊断状态" clearable style="width: 100px"
                       :disabled="true">
              <el-option v-for="dict in dict.type.sys_diagnosis_status" :key="dict.value" :label="dict.label"
                         :value="dict.value" />
            </el-select>
          </el-form-item>
            <el-form-item label="就诊门诊" prop="deptName">
                <el-input v-model="patientItem.deptName" placeholder="就诊门诊" clearable style="width: 100px"
                    :disabled="true" />
            </el-form-item>
          <el-form-item label="医生诊断" prop="diagnosis">
            <el-input v-model="patientItem.doctorDiagnosis" type="textarea" :rows="1" placeholder="医生诊断" clearable
                      style="width: 455px" :disabled="true" />
          </el-form-item>
            <el-form-item v-if="patientItem.patientId">
                <el-button type="primary" plain icon="el-icon-s-custom" size="mini"
                    @click="goDetail(patientItem.patientId)">顾客详情</el-button>
            </el-form-item>
        </el-form>
        <div class="formBox searchForm" ref="statisticalTable" style="margin-bottom:0px!important;">
            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                               v-hasPermi="['photoWorkstation:photoList:add']">新增</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getlistDetectionVisit"></right-toolbar>
            </el-row>
            <el-table border v-loading="loading" style="width: 100%" :data="listDetectionVisit" ref="table"
                :height="statisticalTableH">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <!-- <el-table-column label="序号" align="center" type="index" width="50">
                    <template slot-scope="scope">
                        <span>{{ getIndex(scope.$index) }}</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="顾客编号" align="center" prop="visitNum" width="160">
                </el-table-column>
                <el-table-column label="顾客姓名" align="center" prop="patientName" :show-overflow-tooltip="true" width="100" />
                <el-table-column label="检测指标" align="center" prop="visitDetectionName" />
                <el-table-column label="检测值" align="center" prop="detectionValue" :show-overflow-tooltip="true"/>
                <el-table-column label="异常标志" align="center" prop="defaultValue" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="scope">
                        <span :style="{ color: (getLabel(scope.row) == '异常'||getLabel(scope.row) =='异常 ↑'||getLabel(scope.row) =='异常 ↓') ? 'red' : 'green' }">{{ getLabel(scope.row) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="正常值" align="center" prop="defaultValue" :show-overflow-tooltip="true" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.hightValue != '' && scope.row.hightValue != null">{{ scope.row.limitValue }} ~
                            {{ scope.row.hightValue }}</span>
                        <span
                            v-else-if="(scope.row.hightValue == '' || scope.row.hightValue == null) && scope.row.defaultValue != '' && scope.row.defaultValue != null">{{
                                scope.row.defaultValue }}</span>
                        <span v-else>-</span>
                    </template>
                </el-table-column>

                <el-table-column label="检测医生" align="center"  width="100">
                  <template slot-scope="scope">
                    <span>{{ scope.row.nickName? scope.row.nickName: scope.row.createBy }}</span>
                  </template>
                </el-table-column>
                <el-table-column sortable label="检测日期" align="center" prop="createTime" width="180">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                                   v-hasPermi="['photoWorkstation:photoList:edit']" >修改</el-button>
                        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                                   v-hasPermi="['photoWorkstation:photoList:remove']">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="Listtotal > 0" :total="Listtotal" :pageSizes.sync="pageSizes" :page.sync="queryListParams.pageNum"
                :limit.sync="queryListParams.pageSize" @pagination="getlistDetectionVisit" />
        </div>

        <!-- 新增检测指标 -->
        <el-dialog :title="planTitle" :visible.sync="centerDialogVisible" v-dialogDrag width="90%"
            :close-on-click-modal="false">
            <detectionAdd v-if="centerDialogVisible" :baseAdd="baseAdd" @closeCenterDialogVisible="closeCenterDialogVisible"
                @refresh="getlistDetectionVisit">
            </detectionAdd>
        </el-dialog>
        <el-dialog title="选择顾客" :visible.sync="patientVisible" width="80%" :close-on-click-modal="false" v-dialogDrag>
            <div class="formBox">
                <el-table border v-loading="loading" style="width: 100%" :data="patientList">
                    <el-table-column label="序号" align="center" type="index" width="50">
                        <template slot-scope="scope">
                            <span>{{ getIndex0(scope.$index) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="顾客编号" align="center" prop="visitNum" width="160" />
                    <el-table-column sortable label="顾客姓名" align="center" prop="patientName" :show-overflow-tooltip="true"
                        width="100" />
                    <el-table-column sortable label="顾客手机号" align="center" prop="patientPhone" :show-overflow-tooltip="true"
                        width="120" />
                    <el-table-column sortable label="性别" align="center" prop="sex" width="80">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="年龄" align="center" prop="birthDate" width="80"/>
                    <el-table-column sortable label="就诊门诊" align="center" prop="deptName" :show-overflow-tooltip="true"
                        width="160" />

                    <el-table-column sortable label="状态" align="center" prop="status" :show-overflow-tooltip="true"
                        width="120">
<!--                        <template slot-scope="scope">-->
<!--                            <dict-tag :options="dict.type.sys_diagnosis_status" :value="scope.row.status" />-->
<!--                        </template>-->
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.status=='0'" type="danger">
                          <dict-tag
                            :options="dict.type.sys_diagnosis_status"
                            :value="scope.row.status"
                          />
                        </el-tag>
                        <el-tag v-else-if="scope.row.status=='1'" type="warning">
                          <dict-tag
                            :options="dict.type.sys_diagnosis_status"
                            :value="scope.row.status"
                          />
                        </el-tag>
                        <el-tag v-else-if="scope.row.status=='3'" type="success">
                          <dict-tag
                            :options="dict.type.sys_diagnosis_status"
                            :value="scope.row.status"
                          />
                        </el-tag>
                        <el-tag v-else-if="scope.row.status=='4'" >
                          <dict-tag
                            :options="dict.type.sys_diagnosis_status"
                            :value="scope.row.status"
                          />
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column sortable label="顾客性质" align="center" prop="properties" width="100">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_patient_properties" :value="scope.row.properties" />
                        </template>
                    </el-table-column>
                    <el-table-column sortable label="登记人" align="center" prop="nickName" width="100"
                        :show-overflow-tooltip="true" />
                    <el-table-column sortable label="登记日期" align="center" prop="createTime" width="180">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width"
                        width="100">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-caret-right"
                                @click="confirmPatient(scope.row)">点击选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :pageSizes.sync="pageSizes" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getPatientList" />
            </div>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog :title="detailTitle" :visible.sync="detailDialogVisible" width="85%" append-to-body v-dialogDrag
            :close-on-click-modal="false">
            <CustomerDetails v-if="detailDialogVisible" :basicInfo="basicInfo"></CustomerDetails>
        </el-dialog>
    </div>
</template>
<script>
import { getVisit } from "@/api/patientRegistration/registrationList";
import CustomerDetails from "@/views/components/customerDetail/customerDetail";
import { listDetectionVisit, delDetectionVisit, getDetectionVisit } from "@/api/photoWorkstation/detection";
import { listDetection } from "@/api/system/detection";
import { Message } from "element-ui";
import detectionAdd from "@/views/components/detection/add";
export default {
    name: "detectionList",
    components: { detectionAdd, CustomerDetails },
    dicts: [
        "sys_diagnosis_status",
        "sys_user_sex",
        "sys_face_part",
        "sys_patient_properties",
        "sys_patient_sort",
        "sys_diagnosis_status"
    ],
    computed: {
        // photoInfo() {
        //     return this.$store.state.app.photoUserInfo
        // },

    },
    data() {
        return {
            statisticalTableH:undefined,
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now() - 8.64e6;  //如果没有后面的-8.64e6就是不可以选择今天的
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '前天',
                    onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
                        const end = date;
                        const start = date;
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近六个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近1年',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            detailTitle: "",
            detailDialogVisible: false,
            basicInfo: {},
            // 遮罩层
            loading: false,
            imageLoading: false,
            // 总条数
            total: 0,
            Listtotal: 0,
            // 显示搜索条件
            showSearch: true,
            // 顾客选择弹窗
            patientVisible: false,
            centerDialogVisible: false,
            baseInfo: { updateStatus: false },
            baseAdd: { updateStatus: false },
            planTitle: "",
            // 日期范围
            dateRange: [],
            // 登记顾客列表
            patientItem: {
                birthDate: undefined,
                customerSort: undefined,
                diagnosis: undefined,
                deptName: undefined,
                patientId: undefined,
                patientName: undefined,
                patientPhone: undefined,
                properties: undefined,
                sex: undefined,
                status: undefined,

            },
            patientList: [],
            listDetectionVisit: [],
            pageSizes: [10, 15, 20, 50],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                visitNum: undefined,
                patientName: undefined,
                visitDetectionName: undefined,
                patientPhone: undefined,
                idNum: undefined,
            },
            queryListParams: {
                pageNum: 1,
                pageSize: 5,
                visitNum: undefined,
                visitDetectionName: undefined,
            },
            detectionType: [],//检测指标集合
            timer: null,
        }
    },
    computed: {
        MuserInfo() {
            return this.$store.state.app.photoUserInfo
        },
        defaultTime: function () {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            month = month > 9 ? month : "0" + month;
            day = day < 10 ? "0" + day : day;
            let today = year + "-" + month + "-" + day;
            return [today, today];
        },
    },
    watch: {
        // MuserInfo: {
        //     handler(newVal, oldValue) {
        //         console.log("888")
        //         const Mdata = newVal
        //         this.queryParams.visitNum = Mdata.visitNum
        //         this.queryParams.patientName = Mdata.patientName
        //         this.queryParams.patientPhone = Mdata.patientPhone
        //         this.queryParams.idNum = Mdata.idNum
        //         if (this.queryParams.visitNum || this.queryParams.patientName || this.queryParams.patientPhone || this.queryParams.idNum) {
        //             this.getPatientList();
        //         }
        //     },
        //     deep: true, // 深度监听
        //     immediate: true,//立即执行
        // }
        showSearch() {
            console.log("执行----****")
            this.$nextTick(() => {
                this.changeHeight()
            }, 1000)

        }
    },
    mounted() {
        //params
        this.dateRange = this.defaultTime
        this.changeHeight()
        this.getDetectionList()
        this.getlistDetectionVisit()
    },
    updated() {
        this.$nextTick(() => {
            this.$refs.table.doLayout()
        })
    },
    methods: {
        changeHeight() {
            if (this.$refs.statisticalTable) {
                const statisticalTableObj = this.$refs.statisticalTable.getBoundingClientRect();
                let h = statisticalTableObj.top + 100
                this.statisticalTableH = 'calc(100vh - ' + h + 'px)'
            } else {
                this.statisticalTableH = '500px'
            }
        },
        getLabel(row) {
            let labeltext = ''
            if (row.hightValue != '' && row.hightValue != null && row.limitValue != '' && row.limitValue != null) {//文本值
                if ((Number(row.hightValue) >= Number(row.detectionValue)) && (Number(row.detectionValue) >= Number(row.limitValue))) {
                    labeltext = '正常'
                } else {
                    if((Number(row.hightValue) < Number(row.detectionValue))){
                        labeltext = '异常 ↑'
                    }else{
                        labeltext = '异常 ↓'
                    }

                }
            } else if ((row.hightValue == '' || row.hightValue == null) && row.defaultValue != '' && row.defaultValue != null) {
                if (row.detectionValue == row.defaultValue) {
                    labeltext = '正常'
                } else {
                    labeltext = '异常'
                }
            }
            return labeltext
        },
        handleUpdate(row) { //修改
            this.planTitle = "修改检测指标";
            const visitDetectionId = row.visitDetectionId;
            getDetectionVisit(visitDetectionId).then((response) => {
                let data = response.data;
                this.baseAdd = data;
                this.baseAdd.updateStatus = true;
                this.centerDialogVisible = true;
            });
        },
        handleDelete(row) {//删除
            const visitDetectionName = row.visitDetectionName
            const visitDetectionId = row.visitDetectionId
            this.$modal
                .confirm(
                    '是否确认删除指标名称为"' +
                    visitDetectionName +
                    '"的数据项？'
                )
                .then(function () {
                    return delDetectionVisit(visitDetectionId);
                })
                .then(() => {
                    this.getlistDetectionVisit()
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        /** 查询列表 */
        getDetectionList() {
            let params = {
                pageNum: 1,
                pageSize: 9999,
            }
            listDetection(
                params
            ).then((response) => {
                this.detectionType = response.rows;
            });
        },
        goDetail() {
            // this.$router.push("/photoWorkstation/photoWorkstation-detail/index/" + patientId);
            this.detailTitle = "顾客详情";
            this.basicInfo = this.patientItem;
            this.detailDialogVisible = true;
        },
        handleAdd() { //新增检测指标
            this.baseAdd = {};
            this.baseAdd.updateStatus = false;
            this.planTitle = "录入检测指标";
            this.centerDialogVisible = true;
        },
        closeCenterDialogVisible() {
            this.centerDialogVisible = false
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.queryListParams.pageNum = 1;
            if (this.queryParams.visitNum || this.queryParams.patientName || this.queryParams.patientPhone || this.queryParams.idNum) {
                this.getPatientList();
            } else {
                this.getlistDetectionVisit()
            }
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            // this.patientList=[]
            this.dateRange = []
            this.queryListParams.visitNum=''
            this.patientItem={}
            this.queryListParams.visitDetectionName=''
            this.resetForm("baseInfoForm");
        },
        // 真实序号计算（计算分页影响）
        getIndex(index) {
            return (this.queryListParams.pageNum - 1) * this.queryListParams.pageNum + index + 1;
        },
        getIndex0(index) {
            return (this.queryParams.pageNum - 1) * this.queryParams.pageNum + index + 1;
        },
        //获取指标录入列表
        getlistDetectionVisit() {
            console.log(this.dateRange)
            this.queryListParams.visitNum = this.patientItem.visitNum
            listDetectionVisit(this.addDateRange(this.queryListParams, this.dateRange)).then(
                (response) => {
                    if (response.rows.length > 0) {
                        this.listDetectionVisit = response.rows
                        this.Listtotal = response.total;
                        console.log(this.Listtotal)
                        this.loading = false;
                    } else {
                        this.listDetectionVisit = []
                        this.Listtotal = 0;
                        this.loading = false;
                    }
                    this.closeCenterDialogVisible()
                }
            )
        },
        // 获取顾客登记列表
        getPatientList() {
            getVisit(this.queryParams).then(
                (response) => {
                    if (response.rows.length > 0) {
                        if (response.rows.length == 1) {
                            this.patientItem = response.rows[0];
                            this.patientItem.birthDate = parseInt((new Date() - new Date(this.parseTime(this.patientItem.birthDate))) / (1000 * 60 * 60 * 24 * 365))
                            //获取检测指标列表
                            this.getlistDetectionVisit()
                        } else {
                            this.loading = true
                            this.patientVisible = true
                            this.patientList = response.rows;
                            this.patientList.forEach(item => {
                                item.birthDate = parseInt((new Date() - new Date(this.parseTime(item.birthDate))) / (1000 * 60 * 60 * 24 * 365))
                            })

                            this.total = response.total;
                            this.loading = false;
                        }
                    } else {
                        // this.$modal.msgWarning("没找到对应的顾客！");
                        this.$confirm('没找到对应的顾客！请您自己搜索选择顾客', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        })
                            .then((content) => {
                                this.resetQuery()
                                console.log('content', content)
                            })
                            .catch((error) => {
                                this.resetQuery()
                                console.log('error', error)
                            })
                    }
                }
            )
        },
        confirmPatient(row) {
            this.patientItem = row
            console.log('confirmPatient', row)
            this.patientVisible = false
            this.getlistDetectionVisit()
        },
    },
    created() {
        this.loading = false
    }



}

</script>
<style scoped rel="stylesheet/scss"  lang="scss">
.formBox {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 4px 4px 4px 4px;
    padding: 20px;
    margin-bottom: 10px;
}

.formBox .el-form-item {
    margin-bottom: 10px;
}

.contentBox {
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
    padding-bottom: 10px;
}

.contentBox .contentBoxLeft {
    display: flex;
    align-items: center;
}

.contentBox .line {
    display: inline-block;
    width: 6px;
    height: 23px;
    background: #5972FF;
    border-radius: 10px;
    margin-right: 12px;
}

.contentBox .name {
    font-size: 18px;

}

.patientBox {
    .itemBox {
        display: flex;
        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
        border-radius: 4px 4px 4px 4px;
        padding: 20px;

        .itemInfoBox {
            display: flex;

        }
    }
}

.user-info-head {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 317px;
    border: 1px solid #000;

    .rightNum {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        color: red;
        font-weight: bold;
        opacity: 1;
    }

    .rightIcon {
        position: absolute;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        color: red;
        font-weight: bold;
        opacity: 0;
    }

    .leftEnlarge {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        color: red;
        opacity: 0;
    }

    .img-style {
        width: 100%;
        height: 100%;

        ::v-deep .el-image__error {
            opacity: 0;
        }
    }

    //image图片路径错误时，不显示破图/图片裂开，
    //.img-style[src=""],
    //.img-style:not([src]) {
    //  opacity: 0;
    //}
    &:hover {
        .rightNum {
            opacity: 0;
        }

        .rightIcon {
            opacity: 1;
        }

        .leftEnlarge {
            opacity: 1;
        }

    }
}


::v-deep .labelBox {
    label {
        position: relative;
    }

    #fileinp {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }

    #btn {
        padding: 5px 10px;
        background: #f3a4a1;
        color: #FFF;
        border: none;
        border-radius: 5px;
        margin-right: 5px;
    }

}

::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
}
</style>

